import dayjs from "dayjs"
import { computed, onUnmounted, ref } from "vue"

// 封装倒计时的方法
export const useCountDown = () => {
  // 1.响应式的数据
  let timer = null
  const time = ref(0)
  // 格式化时间的函数   00分00秒00
  const formatTime = computed(() => {
    return dayjs.unix(time.value).format('mm分ss秒')
  })

  // 清除定时器
  const clearTimer = () => {
    timer && clearInterval(timer)
  }

  // 2.开始倒计时的函数
  const start = (currentTime) => {
    // 清楚之前的定时器
    clearTimer()
    // 时间格式化
    currentTime = Number(currentTime)
    // 如果当前时间小于等于0 或者 不存在时间，直接返回
    if (currentTime <= 0 || !currentTime) {
      return
    }
    // 开始倒计时的逻辑
    // 核心逻辑：每隔1秒，计算出剩余的时间，然后更新time
    time.value = currentTime
    timer = setInterval(() => {
      time.value--
      if (time.value <= 0) {
        time.value = 0
        clearTimer()
      }
    }, 1000)
    // 问题：如果用户在倒计时过程中，重新调用start函数，会导致之前的定时器失效
    // 解决：每次调用start函数时，都应该先清除之前的定时器
  }

  // 组件卸载时，清除定时器
  onUnmounted(() => {
    clearTimer()
  })

  // 3.返回值
  return {
    formatTime,
    start,
  }
}
